<template>
  <div>
    <swiper :options="swiperOption">
      <swiper-slide>
        <img class="w-100" src="../assets/images/0ba904f8f65064f412ec8dd738b89037.jpeg" alt="">
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/images/efd2ac73f27d7c586d22b72296c9800c.jpeg" alt="">
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/images/fc5d06259105192ffdd74473e367f5e8.jpeg" alt="">
      </swiper-slide>
      <div class="swiper-pagination pagination-home text-right px-3 pb-1" slot="pagination"></div>
    </swiper>
    <!-- end of swiper  -->
    <div class="nav-icons bg-white mt-3 text-center pt-3 text-dark-1">
      <div class="d-flex flex-wrap">
        <div class="nav-item mb-3"
        v-for="n in 12" :key="n">
          <i class="sprite sprite-news"></i>
          <div class="py-2">爆料站</div>
        </div>
      </div>
      <div class="bg-light py-2 fs-sm">
        <i class="sprite sprite-arrow mr2"></i>
        <span>收起</span>
      </div>
    </div>

    <!-- end of icons -->

    <m-list-card icon="menu1" title="新闻资讯" :categories="newsCats">
      <template #items="{category}">
        <router-link
        tag='div'
        :to="`/articles/${news._id}`"
        class="py-2 fs-lg d-flex" v-for="(news, i) in category.newsList" :key="i">
          <span class="text-info">[{{ news.categoryName }}]</span>
          <span class="px-2">|</span>
          <span class="flex-1 text-dark text-ellipsis pr-2">{{news.title}}</span>
          <span class="text-grey-1 fs-sm">{{news.createdAt | date}}</span>
        </router-link>
      </template>
    </m-list-card>

    <m-list-card icon="card-hero" title="英雄列表" :categories="heroCats">
      <template #items="{category}">
        <div class="d-flex flex-wrap" style="margin: 0 -0.5rem">
          <div class="p-2 text-center"
          style="width: 20%" v-for="(hero, i) in category.heroList" :key="i">
            <img class="w-100" :src="hero.avatar" alt="">
            <div>{{ hero.name }}</div>
          </div>
        </div>
      </template>
    </m-list-card>
    
    <m-card icon="meun1" title="英雄列表"></m-card>
    <m-card icon="meun1" title="英雄列表"></m-card>
    <m-card icon="meun1" title="英雄列表"></m-card>
  </div>

</template>

<script>
import dayjs from 'dayjs';
export default {
  filters: {
    date(val){
      return dayjs(val).format('MM/DD')
    }
  },
  data(){
    return {
      swiperOption: {
        pagination: {
          el: '.pagination-home'
        }
      },
      newsCats: [
        // {
        //   name: "热门",
        //   newList: new Array(5).fill(1).map(v => ({     //eslint-disable-line no-unused-vars
        //     categoryName: '公告',
        //     title: '6月16日净化游戏环境声明及处罚公告',
        //     date: '06/01'
        //   }))
        // },
        // {
        //   name: "新闻",
        //   newList: new Array(5).fill(1).map(v => ({     //eslint-disable-line no-unused-vars
        //     categoryName: '新闻',
        //     title: '6月16日净化游戏环境声明及处罚公告',
        //     date: '06/01'
        //   }))
        // },
        // {
        //   name: "新闻",
        //   newList: new Array(5).fill(1).map(v => ({     //eslint-disable-line no-unused-vars
        //     categoryName: '新闻',
        //     title: '6月16日净化游戏环境声明及处罚公告',
        //     date: '06/01'
        //   }))
        // },
        // {
        //   name: "新闻",
        //   newList: new Array(5).fill(1).map(v => ({     //eslint-disable-line no-unused-vars
        //     categoryName: '新闻',
        //     title: '6月16日净化游戏环境声明及处罚公告',
        //     date: '06/01'
        //   }))
        // },
        // {
        //   name: "新闻",
        //   newList: new Array(5).fill(1).map(v => ({     //eslint-disable-line no-unused-vars
        //     categoryName: '新闻',
        //     title: '6月16日净化游戏环境声明及处罚公告',
        //     date: '06/01'
        //   }))
        // }
        // {
        //   name: "热门",
        //   // newList: new Array(5).fill(1).map(v => ({
        //   //   categoryName: '公告',
        //   //   title: '6月16日净化游戏环境声明及处罚公告',
        //   //   date: '06/01'
        //   // }))

        //   newsList: [
        //     {
        //       categoryName: '公告',
        //       title: '6月16日净化游戏环境声明及处罚公告',
        //       date: '06/16'
        //     },
        //     {
        //       categoryName: '公告',
        //       title: '6月16日净化游戏环境声明及处罚公告',
        //       date: '06/16'
        //     },
        //     {
        //       categoryName: '公告',
        //       title: '6月16日净化游戏环境声明及处罚公告',
        //       date: '06/16'
        //     },
        //     {
        //       categoryName: '公告',
        //       title: '6月16日净化游戏环境声明及处罚公告',
        //       date: '06/16'
        //     },
        //     {
        //       categoryName: '公告',
        //       title: '6月16日净化游戏环境声明及处罚公告',
        //       date: '06/16'
        //     },
        //   ]
        // },

        // {
        //   name: "新闻",
        //   newList: new Array(5).fill(1).map( v => ({
        //     categoryName: '新闻',
        //     title: '6月16日净化游戏环境声明及处罚公告',
        //     date: '06/01'
        //   }))
        // },
        // {
        //   name: "新闻",
        //   newList: new Array(5).fill(1).map( v => ({
        //     categoryName: '新闻',
        //     title: '6月16日净化游戏环境声明及处罚公告',
        //     date: '06/01'
        //   }))
        // },
        // {
        //   name: "新闻",
        //   newList: new Array(5).fill(1).map( v => ({
        //     categoryName: '新闻',
        //     title: '6月16日净化游戏环境声明及处罚公告',
        //     date: '06/01'
        //   }))
        // },
        // {
        //   name: "新闻",
        //   newList: new Array(5).fill(1).map( v => ({
        //     categoryName: '新闻',
        //     title: '6月16日净化游戏环境声明及处罚公告',
        //     date: '06/01'
        //   }))
        // },
      ],
      heroCats: [],
    }
  },
  methods:{
    async fetchNewsCats(){
      const res = await this.$http.get('news/list')
      this.newsCats = res.data
      console.log(this.newsCats);
    },
    async fetchHeroCats(){
      const res = await this.$http.get('heroes/list')
      this.heroCats = res.data
      console.log(this.heroCats);
    }
  },
  created(){
    this.fetchNewsCats();
    this.fetchHeroCats()
  }
}
</script>

<style lang="scss">
@import '../assets/scss/variables';

.pagination-home {
  .swiper-pagination-bullet {
    opacity: 1;
    border-radius: 0.1538rem;
    background: map-get($colors, 'white');
    &.swiper-pagination-bullet-active {
      background: map-get($colors, 'info');
    }
  }
}

.nav-icons {
  border-top: 1px solid $border-color;
  border-bottom: 1px solid $border-color;
  .nav-item {
    width: 25%;
    border-left: 1px solid $border-color;
    &:nth-child(4n+1) {
      border-left: none;
    }
  }
}
</style>